<template>
  <div>
    <md-swiper
      class="banner"
      ref="swiper"
      :is-prevent="false"
      :useNative-driver="false"
      :transition="'slide'"
      :autoplay="3000"
      :swiperHeight="150"
      :borderRadius="0"
    >
      <md-swiper-item
        :key="$index"
        v-for="(item, $index) in bannerImgList"
      >
        <div class="banner-item"><img class="bannerImg" :src="item.picUrl"  @click="handleBannerClick($index)"/></div>
      </md-swiper-item>
    </md-swiper>
    <md-row class="row-c59f64">
      <md-col :span="24">
        <div class="div-b86b6a" @click="handClick">
          <img class="img-a167c6" :src="widget_a10521.options.imageUrl" /><span
            class="span-828b4b"
            >{{ widget_a10521.options.content }}
          </span>
        </div>
      </md-col>
      <md-col :span="24">
        <div class="div-2d6e52">
          <img class="img-2af29f" :src="widget_bc8856.options.imageUrl" /><span
            class="span-96e5f5"
            >{{ widget_bc8856.options.content }}
          </span>
        </div>
      </md-col>
      <md-col :span="24">
        <div class="div-5f7721">
          <img class="img-830106" :src="widget_2a7318.options.imageUrl" /><span
            class="span-b5ae50"
            >{{ widget_2a7318.options.content }}
          </span>
        </div>
      </md-col>
      <md-col :span="24">
        <div class="div-85c8f2">
          <img class="img-18a127" :src="widget_991d0d.options.imageUrl" /><span
            class="span-47714a"
            >{{ widget_991d0d.options.content }}
          </span>
        </div>
      </md-col>
      <md-col :span="24">
        <div class="div-4c4553">
          <img class="img-569b75" :src="widget_e7076c.options.imageUrl" /><span
            class="span-5c6bf1"
            >{{ widget_e7076c.options.content }}
          </span>
        </div>
      </md-col>
    </md-row>
    <md-row class="row-1546d1">
      <md-col :span="24">
        <div class="div-f33a5b">
          <img class="img-da201a" :src="widget_497553.options.imageUrl" /><span
            class="span-c651b0"
            >{{ widget_497553.options.content }}
          </span>
        </div>
      </md-col>
    </md-row>
    <md-row class="row-398733">
      <md-col :span="4">
        <div class="div-f0e2db">
          <img class="img-69d629" :src="widget_5f62f1.options.imageUrl" />
        </div>
      </md-col>
      <md-col :span="8">
        <span class="span-07e960">{{ widget_546b5c.options.content }}</span
        ><span
          @click="$bridge.toZipPage(widget_a2d21e.options.path)"
          class="span-7e1ba2"
          >{{ widget_a2d21e.options.content }}</span
        >
      </md-col>
      <md-col :span="4">
        <div class="div-c83271">
          <img class="img-2a222b" :src="widget_f73390.options.imageUrl" />
        </div>
      </md-col>
      <md-col :span="8">
        <span class="span-b88349">{{ widget_fdcf03.options.content }}</span
        ><span
          @click="$bridge.toZipPage(widget_177a6f.options.path)"
          class="span-2188ac"
          >{{ widget_177a6f.options.content }}</span
        >
      </md-col>
    </md-row>
    <md-row class="row-f2534e">
      <md-col :span="4">
        <div class="div-93bbe0">
          <img class="img-a89b83" :src="widget_1e0853.options.imageUrl" />
        </div>
      </md-col>
      <md-col :span="8">
        <span class="span-105f6a">{{ widget_714f76.options.content }}</span
        ><span
          @click="$bridge.toZipPage(widget_42a944.options.path)"
          class="span-036f2c"
          >{{ widget_42a944.options.content }}</span
        >
      </md-col>
      <md-col :span="4">
        <div class="div-7ff7ac">
          <img class="img-930491" :src="widget_d6192d.options.imageUrl" />
        </div>
      </md-col>
      <md-col :span="8">
        <span class="span-3d71eb">{{ widget_71d7f0.options.content }}</span
        ><span class="span-be6a8a">{{ widget_86b8da.options.content }}</span>
      </md-col>
    </md-row>
    <md-row>
      <md-col :span="24">
        <scrolling-ribbon></scrolling-ribbon>
      </md-col>
    </md-row>
  </div>
</template>

<script>
import api from '../assets/js/url'
import ScrollingRibbon from './ScrollingRibbon'
export default {
  components: {
    ScrollingRibbon
  },
  data() {
    return {
      widget_bea50d: {
        name: "轮播",
        options: {
          autoplayFlag: true,
          multiple: false,
          imageList: [
            "http://118.144.87.37:13083/group1/M00/00/38/CgIEq11OdRKAbVSZAAPJCQUpzII772.png",
            "http://118.144.87.37:13083/group1/M00/00/39/CgIEq11OdR2AJvdnAAONWl_74Ds980.png",
            "http://118.144.87.37:13083/group1/M00/00/39/CgIEq11OdSWAPbYQAAIznd1mIdU567.png",
            "http://118.144.87.37:13083/group1/M00/00/39/CgIEq11OdS2AYQtoAALvvwgrBo0991.png",
            "http://118.144.87.37:13083/group1/M00/00/39/CgIEq11OdTaAXk4GAAJi276C85s191.png",
            "http://118.144.87.37:13083/group1/M00/00/39/CgIEq11OdUOAfSgmAAQBH7zLiCA368.png",
            "http://118.144.87.37:13083/group1/M00/00/39/CgIEq11OdUyANiEnAAPLnBXILok154.png",
            "http://118.144.87.37:13083/group1/M00/00/39/CgIEq11OdVaARGm6AANxXRBzkKM802.png"
          ],
          imageQuality: 1,
          remote: false,
          props: {
            label: "label",
            value: "value"
          }
        },
        rules: []
      },
      widget_a10521: {
        name: "图片-文本",
        options: {
          imageUrl:
            "http://118.144.87.37/group1/M00/00/09/rBAj6F05I-2AXSNVAAALR593Tmk394.png",
          path: "credit",
          content: "信用卡申请",
          supId: "B6613A6E6D714DCFAAE971C9D037656E"
        },
        rules: []
      },
      widget_bc8856: {
        name: "图片-文本",
        options: {
          imageUrl:
            "http://118.144.87.37/group1/M00/00/09/rBAj6F05JIOAaFmjAAAIFnHq5OA270.png",
          path: "income",
          content: "我要投资",
          supId: "B6613A6E6D714DCFAAE971C9D037656E"
        },
        rules: []
      },
      widget_2a7318: {
        name: "图片-文本",
        options: {
          imageUrl:
            "http://118.144.87.37/group1/M00/00/09/rBAj6F05JRGASJzmAAAXKveony4991.png",
          path: "transfer",
          content: "我要贷款",
          supId: "B6613A6E6D714DCFAAE971C9D037656E"
        },
        rules: []
      },
      widget_991d0d: {
        name: "图片-文本",
        options: {
          path: "loan",
          imageUrl:
            "http://118.144.87.37/group1/M00/00/09/rBAj6F05I8qAFUfPAAARH5HS-uM880.png",
          content: "手机银行",
          supId: "B6613A6E6D714DCFAAE971C9D037656E"
        },
        rules: []
      },
      widget_e7076c: {
        name: "图片-文本",
        options: {
          path: "",
          imageUrl:
            "http://118.144.87.37/group1/M00/00/08/rBAj6F05E6qAUOttAAAFtLWAx4w296.png",
          content: "更多",
          supId: "B6613A6E6D714DCFAAE971C9D037656E"
        },
        rules: []
      },
      widget_497553: {
        name: "图片-文本",
        options: {
          path: "",
          imageUrl:
            "http://118.144.87.37/group1/M00/00/09/rBAj6F05JMiAJB0zAAAHqFYAKgI279.png",
          content: "贴心服务",
          supId: "B6613A6E6D714DCFAAE971C9D037656E"
        },
        rules: []
      },
      widget_5f62f1: {
        name: "图片",
        options: {
          imageUrl:
            "http://118.144.87.37/group1/M00/00/09/rBAj6F05HneAbCeCAABJGo3gkhQ926.png"
        },
        rules: []
      },
      widget_546b5c: {
        name: "文本框",
        options: {
          path: "",
          content: "微信提醒"
        },
        rules: []
      },
      widget_a2d21e: {
        name: "文本框",
        options: {
          path: "",
          content: "动账通知快速直达"
        },
        rules: []
      },
      widget_f73390: {
        name: "图片",
        options: {
          imageUrl:
            "http://118.144.87.37/group1/M00/00/09/rBAj6F05JbOACl-UAAAKwrGAlZA598.png"
        },
        rules: []
      },
      widget_fdcf03: {
        name: "文本框",
        options: {
          path: "",
          content: "附近网点"
        },
        rules: []
      },
      widget_177a6f: {
        name: "文本框",
        options: {
          path: "",
          content: "服务贴心保障"
        },
        rules: []
      },
      widget_1e0853: {
        name: "图片",
        options: {
          imageUrl:
            "http://118.144.87.37/group1/M00/00/09/rBAj6F05JcGAFthQAAAWxbI0E7Y512.png"
        },
        rules: []
      },
      widget_714f76: {
        name: "文本框",
        options: {
          path: "",
          content: "在线客服"
        },
        rules: []
      },
      widget_42a944: {
        name: "文本框",
        options: {
          path: "",
          content: "客服在线为您解忧"
        },
        rules: []
      },
      widget_d6192d: {
        name: "图片",
        options: {
          imageUrl:
            "http://118.144.87.37/group1/M00/00/09/rBAj6F05Jc-AEs-8AABDt_i9ojM972.png"
        },
        rules: []
      },
      widget_71d7f0: {
        name: "文本框",
        options: {
          path: "",
          content: "网点预约"
        },
        rules: []
      },
      widget_86b8da: {
        name: "文本框",
        options: {
          path: "",
          content: "线上预约少等待"
        },
        rules: []
      },
      bannerImgList: []
    };
  },
  methods: {
    login () {
      let params = {"loginUsername":"demo", "loginPassword":"123456"}
      this.$remote('/rbac/login/userlogin.action', params)
        .then(res => {
          console.log(res)
          this.queryBannerList()
        })
    },
    queryBannerList () {
      let params = {
        isPublish: '1',
        picType: '1'
      }
      this.$remote(api.QUERY_BANNER, params)
        .then(res => {
          console.log(res)
          this.bannerImgList = res
          console.log('++++++++++++', this.bannerImgList)
        })
    },
    handleBannerClick($index) {
      sa.track('$CollecBannerClick', {
        '$element_content': this.bannerImgList[$index].id
      })
      console.log(this.bannerImgList[$index])
    },
    handClick() {
      this.$router.push({
        name: "credit"
      })
    }
  },
  created () {
    this.login()
    sa.track('$pageview', {
      '$url_path': 'index'
    })
    sa.track('$pageview', {
      '$url_path': 'ProductMenu'
    })
  },
};
</script>

<style scoped>
.bannerImg {
  height: 100%;
}
.div-b86b6a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  flex-direction: column;
}

.img-a167c6 {
  display: block;
  border: 0px solid #dedede;
  height: 30px;
  width: 30px;
  border-radius: 0px;
}

.span-828b4b {
  display: block;
  padding-left: 0px;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
}

.div-2d6e52 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  flex-direction: column;
}

.img-2af29f {
  display: block;
  border: 0px solid #dedede;
  height: 30px;
  width: 30px;
  border-radius: 0px;
}

.span-96e5f5 {
  display: block;
  padding-left: 0px;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
}

.div-5f7721 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  flex-direction: column;
}

.img-830106 {
  display: block;
  border: 0px solid #dedede;
  height: 30px;
  width: 30px;
  border-radius: 0px;
}

.span-b5ae50 {
  display: block;
  padding-left: 0px;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
}

.div-85c8f2 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  flex-direction: column;
}

.img-18a127 {
  display: block;
  border: 0px solid #dedede;
  height: 30px;
  width: 30px;
  border-radius: 0px;
}

.span-47714a {
  display: block;
  padding-left: 0px;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
}

.div-4c4553 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  flex-direction: column;
}

.img-569b75 {
  display: block;
  border: 0px solid #dedede;
  height: 30px;
  width: 30px;
  border-radius: 0px;
}

.span-5c6bf1 {
  display: block;
  padding-left: 0px;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
}

.row-c59f64 {
  padding: 0px;
  margin: 0px;
}

.div-f33a5b {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 0px;
  padding-bottom: 0px;
  flex-direction: row;
}

.img-da201a {
  display: block;
  border: 0px solid #dedede;
  height: 30px;
  width: 30px;
  border-radius: 0px;
}

.span-c651b0 {
  display: block;
  padding-left: 12px;
  height: 30px;
  font-size: 18px;
  line-height: 30px;
}

.row-1546d1 {
  padding: 20px 0px 20px 20px;
  margin: 10px 0px 0px 0px;
}

.div-f0e2db {
  height: auto;
  width: 100%;
}

.img-69d629 {
  display: block;
  height: 36px;
  width: 36px;
  margin: auto;
  border: 0px solid #dedede;
  border-radius: 0px;
}

.span-07e960 {
  font-size: 12px;
  display: block;
  height: 18px;
  width: 60%;
  text-align: left;
  font-weight: bold;
  padding-left: 6px;
  padding-right: 6px;
  line-height: 18px;
}

.span-7e1ba2 {
  font-size: 12px;
  display: block;
  height: 18px;
  width: 60%;
  text-align: left;
  font-weight: normal;
  padding-left: 6px;
  padding-right: 6px;
  line-height: 18px;
}

.div-c83271 {
  height: auto;
  width: 100%;
}

.img-2a222b {
  display: block;
  height: 36px;
  width: 36px;
  margin: auto;
  border: 0px solid #dedede;
  border-radius: 0px;
}

.span-b88349 {
  font-size: 14px;
  display: block;
  height: 18px;
  width: 60%;
  text-align: left;
  font-weight: bold;
  padding-left: 6px;
  padding-right: 6px;
  line-height: 18px;
}

.span-2188ac {
  font-size: 12px;
  display: block;
  height: 18px;
  width: 60%;
  text-align: left;
  font-weight: normal;
  padding-left: 6px;
  padding-right: 6px;
  line-height: 18px;
}

.row-398733 {
  padding: 20px 0px;
  margin: 1px 0px 0px 0px;
}

.div-93bbe0 {
  height: auto;
  width: 100%;
}

.img-a89b83 {
  display: block;
  height: 36px;
  width: 36px;
  margin: auto;
  border: 0px solid #dedede;
  border-radius: 0px;
}

.span-105f6a {
  font-size: 14px;
  display: block;
  height: 18px;
  width: 60%;
  text-align: left;
  font-weight: bold;
  padding-left: 6px;
  padding-right: 6px;
  line-height: 18px;
}

.span-036f2c {
  font-size: 12px;
  display: block;
  height: 18px;
  width: 60%;
  text-align: left;
  font-weight: normal;
  padding-left: 6px;
  padding-right: 6px;
  line-height: 18px;
}

.div-7ff7ac {
  height: auto;
  width: 100%;
}

.img-930491 {
  display: block;
  height: 36px;
  width: 36px;
  margin: auto;
  border: 0px solid #dedede;
  border-radius: 0px;
}

.span-3d71eb {
  font-size: 14px;
  display: block;
  height: 18px;
  width: 60%;
  text-align: left;
  font-weight: bold;
  padding-left: 6px;
  padding-right: 6px;
  line-height: 18px;
}

.span-be6a8a {
  font-size: 12px;
  display: block;
  height: 18px;
  width: 60%;
  text-align: left;
  font-weight: normal;
  padding-left: 6px;
  padding-right: 6px;
  line-height: 18px;
}

.row-f2534e {
  padding: 20px 0px;
  margin: 1px 0px 0px 0px;
}
</style>
